<template>
  <div class="course_container">
    <div class="course_container_left">
      <el-tooltip class="item" effect="dark" placement="bottom-start">
        <div class="left_title shou">{{ form.courseName }}</div>
        <div slot="content">{{ form.courseName }}</div>
      </el-tooltip>
      <div class="left_content">
        <div class="left_content_item" v-if="form.studyTime">
          <div class="left_content_item_label">基准学时</div>
          <div class="left_content_item_value color_green">
            {{ form.studyTime }}时
          </div>
        </div>
        <div class="left_content_item">
          <div class="left_content_item_label">主讲老师</div>
          <div class="left_content_item_value font_w_bold">
            {{ form.principalName }}
          </div>
        </div>
        <div
          class="left_content_item"
          v-if="form.teacherIds.length > 0 ? true : false"
        >
          <div class="left_content_item_label">辅助老师</div>
          <div class="left_content_item_value flex_wrap">
            <span v-for="(item, index) in commonTeacher" :key="index">
              <span
                class="teacher_text"
                style="margin-right: 10px"
                v-if="item1 == item.teacherId"
                v-for="(item1, index1) in form.teacherIds"
                :key="index1"
              >
                {{ item.name }}
              </span>
            </span>
          </div>
        </div>
        <div class="left_content_item">
          <div class="left_content_item_label">可否跳关</div>
          <div class="left_content_item_value color_red">
            {{ form.jumpStatus == 1 ? "是" : "否" }}
          </div>
        </div>
        <!--        <div class="left_content_item" v-if="form.preCourseName">-->
        <!--          <div class="left_content_item_label">上级课程</div>-->
        <!--          <div class="left_content_item_value">-->
        <!--            {{ form.preCourseName }}-->
        <!--          </div>-->
        <!--        </div>-->
        <div class="left_content_item" v-if="form.workstationIds">
          <div class="left_content_item_label">关联工作站</div>
          <div class="left_content_item_value">
            <div v-for="(item, index) in workstations" :key="index">
              <div
                class="workspace"
                style="margin-right: 10px"
                v-if="form.workstationIds == item.workstationId"
              >
                {{ item.workstationName }}
              </div>
            </div>
          </div>
        </div>
        <div class="left_content_item">
          <div class="left_content_item_label">学习框架图</div>
        </div>
        <div class="left_content_item" style="display: block">
          <el-image
            v-for="(item, index) in form.framePic"
            class="content_img"
            :preview-src-list="form.framePic ? form.framePic : []"
            :src="item"
            :key="index"
          ></el-image>
        </div>
      </div>
    </div>
    <div class="course_container_right">
      <div class="right_title">详情</div>
      <div class="right_content">
        <div class="right_content_item">
          <div class="right_content_item_label">课程目标</div>
          <div class="right_content_item_value" style="white-space: pre-wrap">
            {{ form.teachingObjectives }}
          </div>
        </div>
        <div class="right_content_item">
          <div class="right_content_item_label">课程描述</div>
          <div class="right_content_item_value" style="white-space: pre-wrap">
            {{ form.describe }}
          </div>
        </div>
        <div class="right_content_item">
          <div class="right_content_item_label">学习内容</div>
          <div class="right_content_item_value" style="white-space: pre-wrap">
            {{ form.content }}
          </div>
        </div>
        <div class="right_content_item">
          <div class="right_content_item_label">教学组织方式</div>
          <div class="right_content_item_value" style="white-space: pre-wrap">
            {{ form.teachingMethod }}
          </div>
        </div>
        <div class="right_content_item">
          <div class="right_content_item_label">学习资料</div>
          <div class="right_content_item_value" style="white-space: pre-wrap">
            {{ form.studyData }}
          </div>
        </div>
        <div class="right_content_item">
          <div class="right_content_item_label">教学考核要求</div>
          <div class="right_content_item_value" style="white-space: pre-wrap">
            {{ form.teachingAssessment }}
          </div>
        </div>
        <div class="right_content_item">
          <div class="right_content_item_label">工具/材料/设备</div>
          <div class="right_content_item_value" style="white-space: pre-wrap">
            {{ form.studyTools }}
          </div>
        </div>
        <div class="right_content_item">
          <div class="right_content_item_label">教学场地描述</div>
          <div class="right_content_item_value" style="white-space: pre-wrap">
            {{ form.teachingPlace }}
          </div>
        </div>
        <div class="right_content_item">
          <div class="right_content_item_label">教学场地</div>
          <div class="right_content_item_value flex_column">
            <div class="img_list">
              <el-image
                v-for="(item, index) in form.teachingPlacePic"
                :key="index"
                class="img_list_item"
                v-bind:src="item"
                :preview-src-list="
                  form.teachingPlacePic ? form.teachingPlacePic : []
                "
              >
              </el-image>
            </div>
          </div>
        </div>
      </div>
      <div class="submit_box flexend">
        <el-button
          v-preventReClick
          v-if="$route.query.type == 'audit'"
          @click="audit"
          type="primary"
          >通过审核</el-button
        >
        <el-button
          v-preventReClick
          v-if="$route.query.type == 'audit'"
          @click="reject"
          type="danger"
          >驳回</el-button
        >
        <el-button v-preventReClick @click="goBack" type="primary"
          >退 出</el-button
        >
      </div>
    </div>
    <rejectDia
      type="1"
      :open.sync="rejectOpen"
      :propform="form"
      @refresh="goBack()"
    ></rejectDia>
  </div>
</template>

<script>
import { listPost_workstation } from "@/api/workstation/workstation";
import { allTeacherList } from "@/api/course/course";
import { listPost_course, reviewCourseTemporary } from "@/api/course/course";
import { json2api } from "@/api/json";
import rejectDia from "./rejectDia.vue";
export default {
  name: "courseInfo",
  components: { rejectDia },
  props: {
    form: {
      type: [Object],
      default: {},
    },
  },
  watch: {
    form(e) {
      console.log(e);
    },
  },
  data() {
    return {
      rejectOpen: false,
      teachers: [],
      courses: [],
      workstations: [],
      commonTeacher: [],
    };
  },
  methods: {
    /* 驳回 */
    reject() {
      this.rejectOpen = true;
    },
    /* 通过审核 */
    audit() {
      this.$confirm(`确定通过审核吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const loading = this.$loading({
            lock: true,
            text: `正在审核中…`,
            spinner: "el-icon-loading",
            background: "rgba(255, 255, 255, 0.6)",
          });
          await reviewCourseTemporary({ id: this.form.id, status: 0 });
          this.$modal.msgSuccess("通过审核成功");
          loading.close();
          this.$store.dispatch("tagsView/delView", this.$router.currentRoute);
          setTimeout(() => {
            this.$router.push({ path: "/course/course_temporary" });
          }, 100);
        })
        .catch(() => {});
    },
    goBack() {
      this.$router.go(-1);
    },
    /* 获取主讲老师 */
    async getTeacher() {
      console.log("info获取主讲老师");
      let res = await json2api();
      res.data.map((item) => {
        item.id = item.branch_id;
        item.name = item.branch_name;
        item.teachers.map((item2) => {
          item2.id = item2.teacher_id;
        });
      });
      this.teachers = res.data;
      let res1 = await allTeacherList({
        schoolId: this.$store.getters.schoolId,
        pageNum: 1,
        pageSize: 9999,
      });
      this.commonTeacher = res1.rows;
    },

    // 获取课程列表 teacherId name
    async getCourse() {
      let response = await listPost_course({
        pageNum: 1,
        pageSize: 9999,
        schoolId: this.$store.getters.schoolId,
      });
      this.courses = response.rows;
    },
    // 获取工作站列表 teacherId name
    async getWorkstation() {
      let response = await listPost_workstation({
        pageNum: 1,
        pageSize: 9999,
        schoolId: this.$store.getters.schoolId,
      });
      this.workstations = response.rows;
    },
  },
  mounted() {
    this.getTeacher();
    this.getWorkstation();
    this.getCourse();
  },
};
</script>

<style scoped lang="scss">
.course_container {
  width: 1200px;
  display: flex;

  &_left {
    width: 320px;

    .left_title {
      height: 45px;
      line-height: 45px;
      padding: 0 15px;
      font-family: PingFangSC-Semibold, PingFang SC;
      box-sizing: border-box;
      font-size: 16px;
      font-weight: 600;
      color: #333333;
      border-right: 1px solid #eef0f1;
      border-bottom: 1px solid #eef0f1;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .left_content {
      width: 100%;
      height: calc(100vh - 305px + 72px);
      overflow: auto;
      padding: 24px 15px 24px 24px;
      box-sizing: border-box;
      border-right: 1px solid #eef0f1;
      border-left: 1px solid #eef0f1;

      &_item {
        display: flex;
        margin-top: 16px;

        &_label {
          width: 92px;
          font-size: 16px;
          font-weight: 400;
          color: #999999;
          line-height: 21px;
        }

        &_value {
          width: calc(100% - 70px);
          font-size: 16px;
          font-weight: 400;
          margin-left: 16px;
          line-height: 21px;
        }
      }

      &_item:nth-child(1) {
        margin-top: 0;
      }

      .content_img {
        width: 269px;
      }
    }
  }

  &_right {
    width: 880px;

    .right_title {
      height: 45px;
      line-height: 45px;
      padding: 0 15px;
      box-sizing: border-box;
      font-size: 16px;
      font-weight: 400;
      color: #333333;
      border-top: 1px solid #eef0f1;
      border-bottom: 1px solid #eef0f1;
    }

    .right_content {
      width: 100%;
      height: calc(100vh - 305px);
      overflow: auto;
      padding: 24px 40px;
      box-sizing: border-box;
      border-right: 1px solid #eef0f1;

      &_item {
        margin-top: 32px;
        display: flex;

        &_label {
          width: 110px;
          font-size: 16px;
          font-weight: 400;
          text-align: right;
          color: #999999;
        }

        &_value {
          width: calc(100% - 125px);
          font-size: 16px;
          font-weight: 400;
          color: #333333;
          margin-left: 13px;
        }
      }

      &_item:nth-child(1) {
        margin-top: 0;
      }
    }
  }
}

.teacher_text {
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  margin: 10px 10px 0 0;
}

.teacher_text:nth-child(-n + 3) {
  margin-top: 0;
}

.workspace {
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  margin-top: 16px;
}

.workspace:nth-child(1) {
  margin-top: 0;
}

.color_green {
  color: #28b28b;
}

.color_red {
  color: #e95756;
}

.font_w_bold {
  font-weight: bold !important;
}

.flex_wrap {
  display: flex;
  flex-wrap: wrap;
}

.img_list {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  &_item {
    width: auto !important;
    height: 101px;
    margin: 10px 10px 0 0;
  }
}

.w_100 {
  width: 100%;
}

.flex_column {
  display: flex;
  flex-direction: column;
}

.submit_box {
  border-top: 1px solid #ebebeb;
  height: 72px;
  box-sizing: border-box;
  padding: 0 19px 0 37px;
  align-items: center;
  ::v-deep .el-button {
    padding: 0 24px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    border-radius: 12px;
    line-height: 38px;
    height: 40px;
  }
}
</style>
